<template>
    <div>
      <p>name:{{ name }}</p>
      <p>name:{{ msg }}</p>
    </div>
  </template>
  
  <script>
//   export default {
//     name: 'refChild',
//     data() {
//       return {
//         name: '张三',
//         msg: 'hello'
//       }
//     },
//     methods: {
//       childFn(val) {
//         this.msg = val
//       }
//     }
//   }
//   </script>
  
  <script setup>
  import { ref } from 'vue'
  defineOptions({
    name: 'refChild'
  })
  const name = ref('张三')
  const msg = ref('hello')
  const childFn = (val) => {
    msg.value = val
  }
  defineExpose({
    childFn,
    name,
    msg
  })
  </script>
   
  